<template>
  <div class="dashboard">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="250px">
        <div class="sidebar">
          <div class="logo">
            <h2>简历生成器</h2>
          </div>
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
          >
            <el-menu-item index="/dashboard">
              <span>🏠 仪表板</span>
            </el-menu-item>
            <el-menu-item index="/resumes">
              <span>📄 我的简历</span>
            </el-menu-item>
            <el-menu-item index="/resumes/create">
              <span>➕ 创建简历</span>
            </el-menu-item>
            <el-menu-item index="/resumes/generate">
              <span>⭐ AI生成简历</span>
            </el-menu-item>
            <el-menu-item index="/templates">
              <span>📋 模板库</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      
      <!-- 主内容区 -->
      <el-container>
        <!-- 顶部导航 -->
        <el-header>
          <div class="header">
            <div class="header-left">
              <h3>欢迎回来，{{ authStore.user?.username || '用户' }}！</h3>
            </div>
            <div class="header-right">
              <el-button type="text" @click="logout">退出登录</el-button>
            </div>
          </div>
        </el-header>

        <!-- 主要内容 -->
        <el-main>
          <div class="main-content">
            <!-- 快速操作 -->
            <div class="quick-actions">
              <h3>快速操作</h3>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="action-card" @click="goToCreate">
                    <div class="action-content">
                      <div class="action-icon">📝</div>
                      <h4>创建新简历</h4>
                      <p>从空白模板开始创建简历</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="action-card" @click="goToGenerate">
                    <div class="action-content">
                      <div class="action-icon">🤖</div>
                      <h4>AI生成简历</h4>
                      <p>使用AI根据描述生成简历</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="action-card" @click="goToTemplates">
                    <div class="action-content">
                      <div class="action-icon">📋</div>
                      <h4>浏览模板</h4>
                      <p>选择专业的简历模板</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <!-- 统计信息 -->
            <div class="stats-section">
              <h3>统计信息</h3>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon">📄</div>
                    <div class="stat-info">
                      <div class="stat-number">5</div>
                      <div class="stat-label">总简历数</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon">✅</div>
                    <div class="stat-info">
                      <div class="stat-number">3</div>
                      <div class="stat-label">已完成</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon">✏️</div>
                    <div class="stat-info">
                      <div class="stat-number">2</div>
                      <div class="stat-label">草稿</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon">⬇️</div>
                    <div class="stat-info">
                      <div class="stat-number">12</div>
                      <div class="stat-label">下载次数</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const activeMenu = computed(() => route.path)

const goToCreate = () => {
  router.push('/resumes/create')
}

const goToList = () => {
  router.push('/resumes')
}

const goToTemplates = () => {
  router.push('/templates')
}

const goToGenerate = () => {
  router.push('/resumes/generate')
}

const logout = () => {
  authStore.logout()
}
</script>

<style scoped>
.dashboard {
  height: 100vh;
}

.sidebar {
  background: #304156;
  height: 100vh;
}

.logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #434a50;
}

.logo h2 {
  color: white;
  margin: 0;
}

.sidebar-menu {
  border: none;
  background: #304156;
}

.sidebar-menu .el-menu-item {
  color: #bfcbd9;
}

.sidebar-menu .el-menu-item:hover,
.sidebar-menu .el-menu-item.is-active {
  background-color: #409eff;
  color: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header-left h3 {
  margin: 0;
  color: #333;
}

.main-content {
  padding: 20px;
}

.quick-actions {
  margin-bottom: 30px;
}

.quick-actions h3 {
  margin-bottom: 20px;
  color: #333;
}

.action-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-content {
  text-align: center;
  padding: 20px;
}

.action-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.action-content h4 {
  margin: 15px 0 10px;
  color: #333;
}

.action-content p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.stats-section h3 {
  margin-bottom: 20px;
  color: #333;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 40px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}
</style> 